<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Progress Bar - Standalone</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="../../../../../css/core.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>

<body>
  <h1>Default Progress Bars</h1>
  <ion-progress-bar></ion-progress-bar>
  <ion-progress-bar value="0.5"></ion-progress-bar>
  <ion-progress-bar type="indeterminate"></ion-progress-bar>

  <hr>

  <h1>Progress Bar: Colors</h1>
  <ion-progress-bar color="primary" value="0.5"></ion-progress-bar>
  <ion-progress-bar color="secondary" value="0.5"></ion-progress-bar>
  <ion-progress-bar color="tertiary" value="0.5"></ion-progress-bar>
  <ion-progress-bar color="success" value="0.5"></ion-progress-bar>
  <ion-progress-bar color="warning" value="0.5"></ion-progress-bar>
  <ion-progress-bar color="danger" value="0.5"></ion-progress-bar>
  <ion-progress-bar color="dark" value="0.5"></ion-progress-bar>
  <ion-progress-bar color="light" value="0.5"></ion-progress-bar>

  <hr>

  <h1>Default Types</h1>
  <ion-progress-bar></ion-progress-bar>
  <ion-progress-bar value="0.5"></ion-progress-bar>
  <ion-progress-bar value="0.20" buffer="0.4"></ion-progress-bar>
  <ion-progress-bar color="warning" reversed="true" value="0.20" buffer="0.4"></ion-progress-bar>
  <ion-progress-bar buffer="0"></ion-progress-bar>
  <ion-progress-bar color="danger" type="indeterminate"></ion-progress-bar>
  <ion-progress-bar type="indeterminate" reversed="true"></ion-progress-bar>

  <hr>

  <h1>Custom: colors by part</h1>
  <ion-progress-bar class="custom-color-parts"></ion-progress-bar>
  <ion-progress-bar class="custom-color-parts" buffer="0.9"></ion-progress-bar>
  <ion-progress-bar class="custom-color-parts" value="0.5"></ion-progress-bar>
  <ion-progress-bar class="custom-color-parts" value="0.20" buffer="0.4"></ion-progress-bar>
  <ion-progress-bar class="custom-color-parts" color="warning" reversed="true" value="0.20" buffer="0.4"></ion-progress-bar>
  <ion-progress-bar class="custom-color-parts" buffer="0"></ion-progress-bar>
  <ion-progress-bar class="custom-color-parts" color="danger" type="indeterminate"></ion-progress-bar>
  <ion-progress-bar class="custom-color-parts" type="indeterminate" reversed="true"></ion-progress-bar>

  <hr>

  <h1>Custom: colors by css variable</h1>
  <ion-progress-bar class="custom-color-variables"></ion-progress-bar>
  <ion-progress-bar class="custom-color-variables" value="0.5"></ion-progress-bar>
  <ion-progress-bar class="custom-color-variables" value="0.20" buffer="0.4"></ion-progress-bar>
  <ion-progress-bar class="custom-color-variables" color="warning" reversed="true" value="0.20" buffer="0.4"></ion-progress-bar>
  <ion-progress-bar class="custom-color-variables" buffer="0"></ion-progress-bar>
  <ion-progress-bar class="custom-color-variables" color="danger" type="indeterminate"></ion-progress-bar>
  <ion-progress-bar class="custom-color-variables" type="indeterminate" reversed="true"></ion-progress-bar>

  <hr>

  <h1>Custom border radius</h1>
  <ion-progress-bar class="custom-border-radius"></ion-progress-bar>
  <ion-progress-bar class="custom-border-radius" value="0.5"></ion-progress-bar>
  <ion-progress-bar class="custom-border-radius" type="indeterminate"></ion-progress-bar>

  <h1>Custom transition</h1>
  <ion-progress-bar class="random-value" max="100"></ion-progress-bar>
  <ion-progress-bar class="random-value custom-transition" max="100"></ion-progress-bar>
</body>

<script>
  let randomValues = document.querySelectorAll('.random-value');

  setInterval(() => {
    let value = Math.random();

    for (let i = 0; i < randomValues.length; i++) {
      randomValues[i].value = value;
    }
  }, 100);
</script>

<style>
  h1 {
    display: flex;
    align-items: center;
    justify-content: space-between;

    font-size: 12px;
    font-weight: normal;

    color: #a1a7b0;

    margin-top: 10px;
    margin-left: 5px;
  }

  hr {
    background: #eff1f3;
    border: none;

    height: 1px;

    margin-top: 18px;
    margin-bottom: 25px;
  }

  ion-progress-bar {
    margin-bottom: 10px;
  }

  /*
   * Custom progress bar color using parts
   * ------------------------------------------------------
   * Note: in these examples setting the background on
   * each element should override the color prop
   */

  /* determinate buffer / track and indeterminate track */
  .custom-color-parts::part(track) {
    background:rgb(158, 157, 36, 0.2);
  }

  /* determinate and indeterminate progress background */
  .custom-color-parts::part(progress) {
    background: #9e9d24;
  }

  /* buffer stream (animated circles) */
  .custom-color-parts::part(stream) {
    background-image: radial-gradient(ellipse at center, rgb(158, 157, 36, 0.2) 0%, rgb(158, 157, 36, 0.2) 30%, transparent 30%);
  }

  /*
   * Custom progress bar color using css variables
   * ------------------------------------------------------
   * Note: in this example setting the background via
   * CSS variables should NOT override the color prop
   */
  .custom-color-variables {
    --background: rgb(158, 157, 36, 0.2);
    --progress-background: #9e9d24;
  }

  /*
   * Custom progress bar border radius using parts
   * ------------------------------------------------------
   */
   .custom-border-radius {
     border-radius: 10px;

     height: 20px;
   }

   .custom-border-radius::part(progress) {
     border-radius: 0 50% 50% 0;
   }

   .custom-border-radius[type="indeterminate"]::part(progress) {
     border-radius: 8px;
   }

  /*
   * Custom transition for fast value changes
   * ------------------------------------------------------
   * The first progress bar in the example has the default
   * transition, while the second has none. This is
   * apparent because they use the same values.
   */
   .custom-transition::part(progress) {
     transition: none;
   }
</style>

</html>
